<template>
  <div id="header">
      <div class="logo">
          <img src="../../assets/地球.png" alt="">
          <h1>光谷智慧交通系统</h1>
      </div>
      <div class="nav">
          <div class="tool">
              <el-menu :default-active="4" class="el-menu-demo menu" mode="horizontal"
                  @select="handleSelect" background-color="#1E1E1E" text-color="#fff">
                  <el-menu-item index="1" v-if="menuStore.userType === 'admin' || menuStore.userType === 'traffic'">
                      <el-icon>
                          <VideoCamera />
                      </el-icon>
                      视频监控</el-menu-item>
                  <el-sub-menu index="2" v-if="menuStore.userType === 'admin' || menuStore.userType === 'traffic'">
                      <template #title>
                          <el-icon>
                              <Management />
                          </el-icon>事件管理</template>
                      <el-menu-item index="2-1">事件添加</el-menu-item>
                      <el-menu-item index="2-2">事件查询</el-menu-item>
                      <el-menu-item index="2-3">事件更新</el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="3">
                      <template #title>
                          <el-icon>
                              <MapLocation />
                          </el-icon>路况信息</template>
                      <el-menu-item index="3-1" @click="handleClick">实时路况</el-menu-item>
                      <!-- <el-menu-item index="3-2">报告路况</el-menu-item> -->
                      <el-menu-item index="3-2" v-if="menuStore.userType === 'common'">报告路况</el-menu-item>
                      <el-menu-item index="3-3"
                          v-if="menuStore.userType === 'admin' || menuStore.userType === 'traffic'">审核信息</el-menu-item>
                  </el-sub-menu>
                  <el-menu-item index="5" v-if="menuStore.userType === 'admin' || menuStore.userType === 'traffic'">
                      <el-icon>
                          <Files />
                      </el-icon>发布公告</el-menu-item>
                  <el-menu-item index="6">
                      <el-icon>
                          <Reading />
                      </el-icon>查看公告</el-menu-item>
                  <el-sub-menu index="7">
                      <template #title>
                          <el-icon>
                              <Tools />
                          </el-icon>工具箱</template>
                      <el-menu-item index="7-1">测量距离</el-menu-item>
                      <el-menu-item index="7-2">测量面积</el-menu-item>
                      <el-menu-item index="7-3">关闭测量</el-menu-item>
                      <el-menu-item index="7-4">导出图片</el-menu-item>
                  </el-sub-menu>
              </el-menu>
          </div>

        </div>
        <div class="search">
            <el-input v-model="keyword" placeholder="请搜索事件" :prefix-icon="Search" />
            <el-button @click="handleSearch" type="primary" plain class="btn">搜索</el-button>
        </div>
        <div class="user">
            <el-dropdown>
                <div class="el-dropdown-link">
                    <img src="../../assets/头像3.png" alt="">
                    {{ menuStore.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-if="menuStore.userType === 'admin'"
                            @click="toggleShowUser">用户管理</el-dropdown-item>
                        <el-dropdown-item @click="onLogout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>

    </div>
    <UserInfo v-if="isShowUser" />
</template>

<script setup>
import { useMenuStore } from '../../store'
import { getLogout } from '../../api/index'
import { useRouter } from 'vue-router'
import UserInfo from './UserInfo.vue';
import { Search } from '@element-plus/icons-vue'
import { inject } from 'vue';
import { query } from '../../utils/query'
let $map = null
const $router = useRouter()
const menuStore = useMenuStore()
let input = ref('')
onMounted(() => {
    $map = inject("$map")
    menuStore.username = localStorage.getItem('username')
    menuStore.userType = localStorage.getItem('type')
    const service = {
        name: 'guanggu',
        layerId: 1
    }
    query({
        service,
        callback: handleQuery
    })
    function handleQuery(data) {
        let source = new ol.source.Vector({});
        var publicLayer = new ol.layer.Vector({
            source,
            name: "实时路况"
        });
        $map.addLayer(publicLayer)
        publicLayer.setVisible(false)
        //取出遍历flow属性再进行颜色设置
        var format = new Zondy.Format.PolygonJSON();
        var features = format.read(data)
        let color = null
        features.forEach(item => {
            let flow = item.values_.values_["车流量"]
            if (flow < 1000) {
                color = "#398439";
            } else if (flow >= 1000 && flow < 1500) {
                color = "#ec971f";
            } else if (flow >= 1500 && flow < 2000) {
                color = "#ff2d51";
            } else {
                color = "#8d1b17";
            }

            item.setStyle(
                new ol.style.Style({
                    //边线颜色
                    stroke: new ol.style.Stroke({
                        color,
                        width: 10,
                    }),
                })
            );
        })
        source.addFeatures(features)
    }
});
let isToggle = false;
function handleClick() {
    let layers = []
    layers = $map.getLayers().array_
    var obj = layers.find(item => item.get("name") == "实时路况")
    isToggle = !isToggle
    if (isToggle) {
        obj.setVisible(true)
    } else {
        obj.setVisible(false)
    }
}
let keyword = ref("")
function handleSelect(value) {
    menuStore.activeIndex = value;
    console.log(menuStore.activeIndex)
}
const onLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("username");
    localStorage.removeItem("type");
    ElMessage({
        message: '退出登录成功',
        type: 'success',
    })
    $router.push({
        path: '/login',
    })
}
const isShowUser = ref(false)
const toggleShowUser = () => {
    if (isShowUser.value) {
        return
    }
    isShowUser.value = !isShowUser.value
}
provide("isShowUser", isShowUser)
function handleSearch() {
    if (keyword.value === "") {
        keyword.value = ""
        alert("请不要输入空的事件")
    } else {
        menuStore.setKeyword(keyword.value)
        keyword.value = ""
        menuStore.activeIndex = "4"
    }

}
</script>

<style lang="scss" scoped>
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1E1E1E;
    color: #fff;
    box-shadow: 0px 2px 2px #999;
    z-index: 99;

    .logo {
        display: flex;
        width: 250px;
        padding: 15px;
        gap: 8px;
        align-items: center;


        img {
            width: 60px;
            height: 60px;
        }

        h1 {
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            text-wrap: nowrap;
        }
    }


    .nav {
        display: flex;
        flex: 1;
        width: 0px;
        height: 90px;
        gap: 10px;
        overflow: hidden;

        .tool {
            height: 90px;
            padding: 0px 10px;

            .menu {
                width: 800px;
                height: 90px;
                border-bottom: none;
            }


        }

    }

    .search {
        display: flex;
        width: 230px;
        align-items: center;
        gap: 5px;

        .btn {
            background-color: #1E1E1E;
            color: #fff;
            border-radius: none;
            border: 1px solid #fff;
        }

        .btn:hover {
            background-color: #fff;
            color: #1E1E1E;
            border: 1px solid #1E1E1E;
        }
    }

    .user {
        width: 120px;
        margin: 0px 20px;

        .el-dropdown-link {
            display: flex;
            gap: 5px;
            align-items: center;
            width: fit-content;
            height: 40px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;

            img {
                width: 50px;
                height: 50px;
                border-radius: 9999px;
            }
        }

        .el-dropdown-link:hover {
            color: #409EFF;
        }

        .el-dropdown-link:focus {
            outline: none;
        }

        el-dropdown-item:hover {
            background-color: #ECF5FF;
            color: #409EFF;
        }
    }
}
</style>
